<template>
  <div class="user">
    <div class="container">
      <div class="floor floor_one">
        <div class="floor_one_info"
             @click="onInfo">
          <h3>广东粤联数据服务有...</h3>
          <span class="floor_one_phone">13501551205</span>
          <div class="floor_one_attest">
            若微信无法收款请实名
            <span>去实名</span>
            <van-icon size="5"
                      color="#ffb72f"
                      name="arrow" />
          </div>

        </div>
        <div class="floor_card">
          <em>账户余额（元）</em>
          <h3>125.00</h3>
          <em>累积收益（元） 1236785.12</em>
          <div class="floor_card_but">
            <van-button icon="balance-list-o"
                        size="small"
                        round>收支明细</van-button>
            <van-button icon="paid"
                        size="small"
                        round>提现申请</van-button>
          </div>
        </div>
      </div>
      <van-cell class="member_item"
                title="商户信息"
                is-link
                to="mreinfo/index">
        <template #title>
          <img width="20"
               src="../../assets/img/user_list_1.png"
               alt=""
               style="margin: 0px 5px -4px 0px;">
          <span class="custom-title">商户信息</span>
        </template>
      </van-cell>
      <van-cell class="member_item"
                title="活动报名"
                is-link
                to="activityApply">
        <template #title>
          <img width="20"
               src="../../assets/img/user_list_2.png"
               alt=""
               style="margin: 0px 5px -4px 0px;">
          <span class="custom-title">活动报名</span>
        </template>
      </van-cell>
      <van-cell class="member_item"
                title="帮助中心"
                is-link
                to="helpcenter/index">
        <template #title>
          <img width="20"
               src="../../assets/img/user_list_2.png"
               alt=""
               style="margin: 0px 5px -4px 0px;">
          <span class="custom-title">帮助中心</span>
        </template>
      </van-cell>
      <van-cell class="member_item"
                title="设置"
                is-link
                @click="onAddress">
        <template #title>
          <img width="20"
               src="../../assets/img/user_list_3.png"
               alt=""
               style="margin: 0px 5px -4px 0px;">
          <span class="custom-title">设置</span>
        </template>
      </van-cell>
      <van-cell class="member_item"
                title="关于付惠吧"
                is-link
                to="set">
        <template #title>
          <img width="20"
               src="../../assets/img/user_list_4.png"
               alt=""
               style="margin: 0px 5px -4px 0px;">
          <span class="custom-title">关于付惠吧</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
// import { apiGetUser } from "@/api/user.js";
import { mapGetters, mapMutations } from "vuex";
export default {

  data () {
    return {
      token: ''
    };
  },
  computed: {
    // ...mapGetters(["user"])
  },

  mounted () {
    // this.getUser()
    // this.token = this.$store.state.user.avatar
    // console.log(this.$store.state.user.avatar,'$store.state.user.avatar')
  },
  methods: {
    async getUser () {
      await apiGetUser();
    },
    onInfo () {
      this.$store.state.user.user ? this.$router.push("./info") : this.toLogin();
    },

    onAddress () {
      this.$store.state.user.user ? this.$router.push("./address") : this.toLogin();
    },
    toLogin () {
      this.$router.push("./login");
    },
    ...mapMutations({
      setOrderStatus: "SET_ORDERS_STATUS"
    })
  },
};
</script>

<style lang="less" scoped>
@import '../../../public/less/variable.less';
.user {
  background: #f9f9f9;
  height: 100%;
}

.floor_one {
  width: 100%;
  background: #ffff;
  margin-bottom: 50px;
  background-image: linear-gradient(to bottom, #ffff 70%, #f9f9f9 0);
  .floor_one_info {
    // display: flex;
    text-align: left;
    padding: 40px 30px;
    h3 {
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #3d3d3d;
      line-height: 54px;
      display: block;
      margin-bottom: 20px;
      padding: 0 20px;
    }
    .floor_one_phone {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      line-height: 32px;
      padding: 0 20px;
      display: block;
      margin-bottom: 20px;
    }
    .floor_one_attest {
      padding: 0 20px;
      height: 60px;
      line-height: 60px;
      background: #f4f4f4;
      border-radius: 26px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      display: inline-block;
      align-items: center;
      span {
        color: #ffb72f;
        margin-left: 10px;
      }
      i {
        position: relative;
        top: 5px;
      }
    }
  }
}
.floor_card {
  height: 350px;
  margin: 0 30px;
  padding: 39px 31px;
  background: url('../../assets/img/user_card_bj.png') no-repeat center;
  em {
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  h3 {
    font-size: 70px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin: 8px 0px 19px 0px;
  }
  .floor_card_but {
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    button {
      font-size: 26px;
      color: #ffffff;
      font-family: PingFang SC;
      font-weight: 400;
      flex: 0 0 40%;
      background-color: transparent;
      border: 2px solid #ffffff;
    }
  }
}
.member_item {
  margin-bottom: 10px;
}
.van-cell__right-icon {
  font-size: 22px;
}
</style>
